<template>
	<view class="feedBack">
		<view class="feedBackContent myboxShadow">
			<u--form labelPosition="top" :model="model1" :rules="rules" ref="form2" labelWidth="auto">
				<u-form-item label="昵称(必填)" prop="feedBack.nickName" borderBottom ref="item1">
					<u--input v-model="model1.feedBack.nickName" border="none" placeholder="请输入昵称"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="feedBack.phone" borderBottom ref="item1">
					<u--input v-model="model1.feedBack.phone" border="none" placeholder="请输入电话号码"></u--input>
				</u-form-item>
				<u-form-item label="使用建议(必填)" prop="feedBack.propose" ref="item1">
					<u--textarea v-model="model1.feedBack.propose" count maxlength='400'
						placeholder="使用中遇到的问题,希望增加的服务,对应的优化建议,都欢迎你写在这里。感谢你帮助我们做的更好。">
					</u--textarea>
				</u-form-item>
			</u--form>
		</view>

		<button class="feedBackBtn myboxShadow" @click="feedBackSub">提交</button>
	</view>
</template>

<script>
	import request from '@/utills/request.js'
	export default {
		data() {
			return {
				model1: {
					feedBack: {
						nickName: '',
						phone: '',
						propose: ''
					}
				},
				rules: {
					'feedBack.nickName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur']
					},
					"feedBack.phone": [{
						type: 'number',
						required: true,
						message: '请输入电话号码'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['blur']
					}],
					"feedBack.propose": {
						type: 'string',
						require: true,
						message: '请填写建议',
						trigger: ['blur']
					}
				},
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则 需要把标签上的rules匹配删除
			this.$refs.form2.setRules(this.rules)
		},
		methods: {
			feedBackSub() {
				this.$refs.form2.validate().then(res => {
					let info = this.model1.feedBack;
					// console.log(info.name);
					uni.request({
						method: 'POST',
						url: this.baseurl + 'feedback/add',
						data: {
							content: info.propose,
							nickname: info.nickName,
							phone: info.phone
						},
						success: res => {
							uni.$u.toast('感谢您的反馈');
							this.model1.feedBack.nickName = ''
							this.model1.feedBack.phone = ''
							this.model1.feedBack.propose = ''
							this.$refs.form2.resetFields();
						}
					})
				}).catch(error => {
					console.log("error", error);
					uni.$u.toast('请正确填写表单')
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #eff5f6;

	}

	.feedBack {
		padding: 15px;
	}

	.feedBackContent {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px 15px;
	}

	.feedBackBtn {
		margin-top: 15px;
		background-color: #1565C0;
		color: #fff;
	}
</style>
